<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <!-- 表单域标签，一定要有name属性，才方便获取值 -->
        用户名:     <input type="text" name="username"><br><br>
        密&emsp;码: <input type="text" name="password"><br><br>
        頭&emsp;像: <input multiple type='file' name="avatar"><br><br> 
        <!--  multiple文件多選，file文件類型 -->
        <input type="submit">
    </form>
    <!-- 導入JS -->
    <script src="./lib/axios.js"></script>
    <script>
        // 獲取標簽
        const form = document.querySelector('form');
        // 綁定提交事件
        form.addEventListener('submit',function(e){
          // 阻止默認事件行爲
          e.preventDefault()

          // 1.基於form標簽創建FormData類型的實例對象
        let fd1 = new FormData(form);
        // 展開運算符可以查看所有可遍歷對象
        console.log(...fd1);
        // 如果想要操作每一個元素，可以使用他裏面的forEach()
        // fd1.forEach((item,key)=>{
        //     console.log(item,key);
        // })

        // 2.創建空白的FormData 類型的實例對象，向對象中添加數據
        let fd2 = new FormData();
        // 使用append()像空白的FormData添加數據
        fd2.append('name','金乾坤');
        fd2.append('age',25);
        // 獲取文件對象
        let input = document.querySelector('[name="avatar"]');
        let obj = input.files[0]; // 使用數組的下標進行選擇
        fd2.append('avatar',obj)
        // 展開運算符可以查看所有可遍歷對象
        console.log(...fd2);
        })

        // 利用ajax發送
        axios({
            method:'post',
            url:'http://www.liulongbin.top:3006/api/formdata',
            // FormData類型的數據，也是通過請求體參數傳遞，所以使用data
            data:fd1// 當前接口不接受文件上傳，所以不要選擇圖片
        }).then(({data:res}) =>{
            console.log(res);
        })
 
        

    </script>
</body>
</html>